import React, { useEffect, useState, useRef } from 'react';
import './index.css'; // 引入样式

const tabs = [
    { title: '金融', image: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/7297a2ece97fb3e9c85dda0eb11cfec3.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { title: '生鲜', image: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/088a3e8e249261d71aa31eb68e151364.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { title: '家居', image: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/ce2e3ea89e0de40c415390d4172aaf6d.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { title: '科技', image: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/8947fa99ee105eb66d7333013afc00d7.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { title: '媒体', image: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/9e040b3fa2e364567fb162480215facf.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { title: '家电', image: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/9102d74748aaa49c221ae1847996ee62.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { title: '电商', image: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/6b673d2ef32ac946904edf2db06389ac.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { title: '文化', image: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/f17f80c2ebadae96c1fadf01713dd195.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { title: '地产', image: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/44b1544837dfabe1fd3cf773d5761e7d.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
];

const TabComponent: React.FC = () => {
    // 当前活动的标签索引，初始为0
    const [activeTab, setActiveTab] = useState(0);
    // 进度条的当前进度
    const [progress, setProgress] = useState(0);
    // 指示进度条是否暂停。
    const [isPaused, setIsPaused] = useState(false);
    // 用于存储定时器的引用，以便在需要时清除。
    const intervalRef = useRef<NodeJS.Timeout | null>(null);

    // 控制进度条
    useEffect(() => {
        // 如果暂停，则不执行以下逻辑
        if (isPaused) return;

        // 设置总持续时间为 3 秒
        const totalDuration = 3000;
        // 并决定每 100 毫秒更新一次进度。
        const progressInterval = 100;
        // 计算更新步数，结果为 30（即 3 秒 / 0.1 秒），表示进度条将在 30 次更新中完成。
        const steps = totalDuration / progressInterval;


        // 设置一个定时器，每 100 毫秒执行一次。在这个定时器内部，我们更新进度条的值。
        intervalRef.current = setInterval(() => {
            // 用函数式更新来确保我们使用的是最新的 prev 值。
            setProgress((prev) => {
                // 如果当前进度达到了 100%
                if (prev >= 100) {
                    // 清除定时器，停止进度更新。
                    clearInterval(intervalRef.current!);
                    // 计算下一个活动标签的索引。使用取模运算符 % 确保索引在 tabs 数组的范围内循环。
                    const nextTab = (activeTab + 1) % tabs.length;
                    // 切换到下一个 Tab
                    setActiveTab(nextTab);
                    // 重置进度
                    return 0;
                }
                return prev + (100 / steps); // 更新进度
            });
        }, progressInterval);

        // 这是一个清理函数，当组件卸载或依赖项改变时会执行。它保证在组件卸载时清除定时器，防止内存泄漏。
        return () => {
            clearInterval(intervalRef.current!);
        };
        // 这些是 useEffect 的依赖项数组。当 activeTab、isPaused 或 progress 改变时，useEffect 将重新执行。
    }, [activeTab, isPaused, progress]);


    // 处理点击标签的事件，清除当前的定时器，设置新的活动标签，重置进度，并显示进度条。
    const handleTabClick = (index: number) => {
        clearInterval(intervalRef.current!);
        setActiveTab(index);
        setProgress(0); // 重置进度条

    };

    // 鼠标进入和离开事件处理
    const handleMouseEnter = () => {
        setIsPaused(true); // 暂停进度条
    };

    const handleMouseLeave = () => {
        setIsPaused(false); // 恢复进度条
    };

    return (
        <div className='tab-container'>
            <p>与众多优秀品牌<br />
                共创营销数字化转型新实践</p>
            <div className='tab'>
                {tabs.map((tab, index) => (
                    <div
                        key={index}
                        onClick={() => handleTabClick(index)}
                        className={`tab-title ${activeTab === index ? 'active' : ''}`} // 动态添加高亮类
                    >
                        {tab.title}
                        {activeTab === index && (
                            <div className='progress-bar'> {/* 进度条容器 */}
                                <div style={{ width: `${progress}%` }} className='tab-progress' /> {/* 实际进度条 */}
                            </div>
                        )}
                    </div>
                ))}
            </div>

            <div className='tab-image'
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}>
                <img
                    src={tabs[activeTab].image}
                    alt={tabs[activeTab].title}
                />
            </div>
        </div>
    );
};

export default TabComponent;
